<template>
  <el-card style="width: 90%;margin: 0 auto">
    <span style="font-size: 10px;color: black;font-weight: bold;margin-left: 20px">填写收货人信息</span>
    <div style="margin-left: 20px;margin-top: 15px;margin-bottom: 15px;border: 1px solid rgb(220,220,220);border-radius: 5px">
      <el-form style="margin-left: 40px;width: 800px" label-width="100px" >
        <el-form-item label="&nbsp;收货人姓名:" style="margin-top: 30px">
          <el-input placeholder="请输入姓名" value=""></el-input>
        </el-form-item>
        <el-form-item label="&nbsp;手机号码:">
          <el-input placeholder="请输入手机号码" value=""></el-input>
        </el-form-item>
        <el-form-item label="&nbsp;所在地区">
          <el-input placeholder="重庆/九龙坡/袁家岗"></el-input>
        </el-form-item>
        <el-form-item label="&nbsp;详细地址">
          <el-input placeholder="街道,小区,楼栋门牌号等"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <span style="font-size: 10px;color: black;font-weight: bold;margin-left: 20px">确认商品清单</span>

    <div style="font-weight: bold;border-bottom: 1px solid rgb(220,220,220);border-radius: 5px">
      <el-table :data="orderArr">
        <el-table-column prop="product" label="商品" align="center">
          <img src="phone.png" style="width: 100px;height:100px;float: left;" align="center">
          <span style="margin-left:10px;text-align:center;line-height:100px;float: left">前期去去去</span></el-table-column>
        <el-table-column prop="size" label="规格" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="subtotal" label="小计" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- 商品统计 -->
    <div style="text-align: right;margin-right: 40px;border-bottom: 1px solid rgb(220,220,220);border-radius: 5px">
      <span>共{{ totalQuantity }}件商品,</span>
      <span style="margin-left: 20px;">总计{{ totalSubtotal }}元</span>
    </div>
    <div style="width: 330px;height:100px;float: right;margin-right: 40px;background-color: rgb(255 250 243);  border: 1px solid rgb(255, 194, 102);margin-top: 20px">
      <p style="margin:10px 0 0 10px ">因付总金额：{{price}}</p>
      <p style="margin:10px 0 0 10px ">收货地址：{{address}}</p>
      <p style="margin:10px 0 0 10px ">收货人：{{username}} {{phone}}</p>
    </div>
    <router-link to="payment"  style="color: white;text-decoration: none"><el-button style="width: 230px;height: 50px;margin-top: 130px;float: right;position: relative;left: 330px;background-color:hotpink;color: white">提交订单</el-button></router-link>
  </el-card>
</template>
<script setup>
import {ref} from "vue";

const orderArr =ref([
  {product:'担保王',size:'撒胡歌那双晒',price:'3434',num:'333',subtotal:'33333.33'}
]);
const totalQuantity=11;
const  totalSubtotal=3433
</script>
html
<style>
.el-form-item__label:before {
  content: "*";
  color: red;
  margin-left: 4px;
}
.el-table td, .el-table th {
  text-align: center;
}
</style>